<template>
	<view class="c_container">
		<view class="tabs">
			<custom-tabs :tabs="tabs" @change="changTab"></custom-tabs>
		</view>
		<view v-if="activeIndex == 0">
			<view class="time_box">
				<view class="time_box_top">
					<view class="recode_top">
						<view class="recode_top_left recode_top_item">
							<view class="uni-list-cell-db">
								<picker mode="date" :value="date1" @change="bindDateChange1">
									<view class="uni-input txt_time">{{date1}}</view>
								</picker>
							</view>
						</view>
						<text class="recode_top_center">至</text>
						<view class="recode_top_right recode_top_item">
							<view class="uni-list-cell-db">
								<picker mode="date" :value="date" @change="bindDateChange">
									<view class="uni-input txt_time">{{date}}</view>
								</picker>
							</view>
						</view>
					</view>
					<text class="timeQuery" @click="query1">查询</text>
				</view>
			</view>
			<view class="s_list_box">
				<view class="txtCon" v-if="dataList.length == 0">
					<noContent></noContent>
				</view>
				<view v-else>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{height: height}" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
					@scroll="scroll">
						<view class="s_list_item" v-for="(item, index) in dataList" :key="index">
							<view class="s_list_item_top">
								<text class="sub_title">{{item.subName}}</text>
								<text class="sub_right">&yen;{{Number(item.amount).toFixed(2)}}</text>
							</view>
							<text class="sub_time">{{item.validBeginTime}}</text>
						</view>
						<view class="less_txt">
							<text class="sub_time">没有更多数据啦~</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view v-if="activeIndex == 1">
			<view class="time_box">
				<view class="time_box_top">
					<view class="recode_top">
						<view class="recode_top_left recode_top_item">
							<view class="uni-list-cell-db">
								<picker mode="date" :value="date1" @change="bindDateChange1">
									<view class="uni-input txt_time">{{date1}}</view>
								</picker>
							</view>
						</view>
						<text class="recode_top_center">至</text>
						<view class="recode_top_right recode_top_item">
							<view class="uni-list-cell-db">
								<picker mode="date" :value="date" @change="bindDateChange">
									<view class="uni-input txt_time">{{date}}</view>
								</picker>
							</view>
						</view>
					</view>
					<text class="timeQuery" @click="query2">查询</text>
				</view>
			</view>
			<view class="s_list_box">
				<view class="txtCon" v-if="subSidyList.length == 0">
					<noContent></noContent>
				</view>
				<view v-else>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{height: height}" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
					@scroll="scroll">
						<view class="s_list_item" v-for="(item, index) in subSidyList" :key="index">
							<view class="s_list_item_top">
								<text class="sub_title">{{item.opTypeName}}</text>
								<text class="sub_time">{{item.billTime}}</text>
							</view>
							<view class="s_list_item_top">
								<text class="sub_right"><text class="amount_money">补助金额：</text>{{Number(item.amount).toFixed(2)}}</text>
								<text class="sub_right"><text class="amount_money">余额：</text>{{Number(item.balance).toFixed(2)}}</text>
							</view>
						</view>
						<view class="less_txt">
							<text class="sub_time">没有更多数据啦~</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryStudentSubsidy, queryEmpsubsidyDetail, querySubsidyDetail } from '../../common/api/index.js';
	import {wx_mini_appid} from '../../common/utils/pay_center.js'
	import noContent from '../../components/no-content.vue'
	export default {
		onShow:function(){
			let _that = this;
			uni.getSystemInfo({
				success: function (res) {
					_that.height = res.windowHeight - 100 + 'px';
				}
			})
			this._getStudentSubsidy()
			this._queryEmpsubsidyDetail()
		},
		onLoad:function(option){
			this.empId = option.empId
			this.orgId = option.orgId
		},
		components: {
			noContent
		},
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			const currentDate1 = this.getDate1({
			    format: true
			})
			return {
				date: currentDate,
				date1: currentDate1,
				orgId: '',
				empId: '',
				scrollTop: 0,
				subSidyList: [],
				height: 0,
				activeIndex: 0,
				tabs:[{
					activeIndex: 0,
					title: '补助发放明细'
				},{
					activeIndex: 1,
					title: '补助使用明细'
				}],
				dataList: []
			}
		},
		methods: {
			query1() {
				this._getStudentSubsidy()
			}, 
			query2() {
				this._queryEmpsubsidyDetail()
			},
			_queryEmpsubsidyDetail() {
				queryEmpsubsidyDetail({
					startBillTime: this.date1+" 00:00:00",
					endBillTime: this.date+" 23:59:59",
					currentPage: 1,
					pageSize: 100,
					orgId: this.orgId,
					empIds:this.empId,
					xappId: wx_mini_appid
				}).then(res => {
					if(res.resultCode == 0) {
						this.subSidyList = res.rows;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			bindDateChange1: function(e) {
				this.date1 = e.target.value
				this.date1 = this.date1.toString().replace(/\//g, "-")
			},
			bindDateChange: function(e) {
			    this.date = e.target.value
				this.date = this.date.toString().replace(/\//g, "-")
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			getDate1(type) {
			    const date = new Date();
				date.setMonth(date.getMonth()-1);
			    let year = date.getFullYear() - (date.getMonth() == 0 ? 1 : 0);
			    let month = date.getMonth() == 0 ? 12 : date.getMonth();
			    let day = date.getDate();
				
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			changTab(e){
				this.activeIndex = e.index
				if(e.index == 0) {
					this._getStudentSubsidy()
				} else if(e.index == 1) {
					this._queryEmpsubsidyDetail()
				}
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				// this.scrollTop = e.detail.scrollTop
			},
			_getStudentSubsidy() {
				uni.showLoading({
					title: '加载中,请稍后...'
				})
				querySubsidyDetail({
					loginOrgId: this.orgId,
					empId: this.empId,
					createBeginTime: this.date1+" 00:00:00",
					createEndTime: this.date+" 23:59:59",
					currentPage: 1,
					pageSize: 100
				}).then(res => {
					uni.hideLoading()
					if(res.code == 0) {
						this.dataList = res.data.list
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(243, 243, 243);
	}
	.c_container {
		background-color: rgb(243, 243, 243);
	}
	.s_list_box {
		padding: 0 20rpx 20rpx 20rpx;
	}
	.s_list_item {
		padding: 40rpx 32rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05);
		border-radius: 8rpx;
	}
	
	.s_list_item_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		line-height: 60rpx;
	}
	.recode_top {
		width: 70%;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
		border-radius: 8rpx;
	}
	.recode_top_center {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.recode_top_item {
		display: flex;
		flex: 1;
		justify-content: center;
	}
	.tabs{
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.txtCon {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	.no-content {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #999999;
	}
	.sub_right {
		font-size: 32rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #FA6400;
	}
	.time_box {
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.time_box_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 0 20rpx;
		height: 96rpx;
	}
	.sub_time {
		font-size: 24rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #999999;
	}
	.timeQuery {
		font-size: 28rpx;
		font-family: "PingFang-SC-Medium, PingFang-SC";
		font-weight: 500;
		color: #FFFFFF;
		background: #185AFF;
		border-radius: 8rpx;
		padding: 12rpx 24rpx;
	}
	.sub_title{
		font-size: 32rpx;
		font-family: "PingFangSC-Semibold, PingFang SC";
		font-weight: 600;
		color: #3C424F;
		margin-bottom: 8rpx;
	}
	.scroll_title {
		font-family: 'Arial Normal', 'Arial';
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.uni-input {
		font-size: 28rpx;
	}
	.amount_money {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
	}
	.txt_time {
		color: #169BD5;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.less_txt {
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
